<template>
    <div class="yue_content">
      <jm-head ref="head"></jm-head>
        <div class="yue_header">
            <h1>{{$store.state.userInfo.jgz}}</h1>
            <p>账号{{$store.state.userInfo.awardName}}</p>

        </div>
         <div class="pay_content box">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="getList"
                v-if="active == 1"
            >

                <div class="pay_content_list">
                    <div class="pay_block box"  v-for = "item in list" :key = "item.id">
                        <h2>{{item.reason}}<span class="fr">{{item.amount}}</span></h2>
                        <p>订单ID：{{item.deal_item_id}}</p>
                        <p>时间：{{item.created_at}}<span class="fr">{{$store.state.userInfo.awardName}}余额：{{item.new_balance}}</span></p>
                    </div>
                </div>
            </van-list>
        </div>



    </div>
</template>
<script>
    import { getDealList } from "@/api/yue";
    import JmHead from '../head/head'
    import Vue from 'vue'
    import { List  } from 'vant';
    
    Vue.use(List)
    
    export default {
        name: 'jifen',
        components: {
            JmHead
        },
        data () {
            return {
                active: 0,
                list: [],
                page: 1,
                loading: false,
                finished: false,
            }
        },
        methods: {
           getList() {
                const that = this
                getDealList({type: 3, page: this.page}).then(res => {
                    this.page++
                    this.loading = false
                    if (this.page > res.data.last_page) {
                        this.finished = true
                    }
                    this.list = this.list.concat(res.data.data)
                })
            },
        },
        activated(){
            this.list = []
            this.finished = false
            this.page = 1
            this.active = -1
            const _this = this
            setTimeout(function(){
              _this.active = 1
            }, 100)
            document.title = this.$store.state.userInfo.awardName + "记录"

            this.$refs.head.setNavBarUrl('',document.title)
        }
    }
</script>

<style lang="stylus" scoped>
    .yue_content >>> .van-tabs__nav
        background-color #deb985
    .yue_content >>> .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after
        border-width 0
    .yue_content >>> .van-tabs__line
        background-color #000
        width 1rem !important
    .yue_content >>> .van-tab--active
        color #000
        font-weight 600
    .yue_content >>> .van-tab
        font-size .26rem

    .yue_content
        width 100%
        height 100%
        overflow hidden
        background #fff
        .yue_header
            width 100%
            overflow hidden
            background #deb985
            padding: 1.2rem 0 1.2rem 0
            margin-top: -.5rem
            h1
                width 100%
                text-align center
                line-height .5rem
                font-size .38rem
                font-weight 600
                color #68401c
                padding: .1rem 0
            p
                width 100%
                text-align center
                line-height .5rem
                font-size .28rem
                font-weight 600
                color #ba3526
            .item_nav
                width 60%
                margin .3rem auto
                overflow hidden
                div
                    line-height .4rem
                    font-size .30rem
                    color #896855
                    padding-bottom .1rem
                    float left
                    &:last-child
                        float right
                .active
                    color #000
                    font-weight 600
                    border-bottom 2px solid #000
        .pay_content
            width 100%
            overflow hidden
            padding  .1rem 0 0 0
            border-radius .3rem
            background #ffffff
            margin-top -.5rem
            .pay_content_top
                width 100%
                padding .3rem
                overflow hidden
                border-bottom 1px solid #eee

                span
                    display inline-block
                    line-height .5rem
                    font-size .28rem
                    color #000
                .num
                    font-size .36rem
                    color red

                .tixian
                    color #ffffff
                    padding 0 .3rem
                    background #c29462
                    border-radius .5rem
            .pay_content_list
                width 100%
                overflow hidden
                .pay_block
                    width 100%
                    overflow hidden
                    padding .3rem
                    border-bottom 1px solid #eee
                    h2
                        line-height .4rem
                        font-size .30rem
                        color #000
                        span
                            color: #ba3526
                    p
                        line-height .4rem
                        font-size .26rem
                        color #6d6d6d
                        margin-top .06rem


</style>
